<template>
  <div class="grid-content ep-bg-purple">
    <!-- 搜索框 -->
    <el-card shadow="always" style="margin-bottom: 10px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input v-model="queryParams.searchText" placeholder="请求路径"></el-input>
        </el-col>
        <el-col :span="6">
          <el-select v-model="queryParams.searchSelect" placeholder="微服务">
            <el-option
                key="service-1"
                label="ghost-service"
                value="service-1"
            />
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-button type="primary">搜索</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 表格 -->
    <el-card shadow="always">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
            prop="serviceGroup"
            label="部署组"
            width="130"
        ></el-table-column>
        <el-table-column
            prop="serviceId"
            label="微服务Id"
            width="180"
        ></el-table-column>
        <el-table-column
            prop="serviceName"
            label="微服务名称"
            width="180"
        ></el-table-column>
        <el-table-column
            prop="path"
            label="请求路径"
            width="180"
        ></el-table-column>
        <el-table-column
            prop="loads"
            label="负载（每分钟调用数）"
            width="100"
        ></el-table-column>
        <el-table-column
            prop="successRate"
            label="成功率 （%）"
            width="100"
        ></el-table-column>
        <el-table-column
            prop="latency"
            label="延迟 （ms）"
            width="100"
        ></el-table-column>
        <el-table-column
            prop="apdex"
            label="健康度"
        ></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryParams: {
        searchText: '',
        searchSelect: ''
      },

      tableData: [
        {
          serviceGroup: 'mesh-svr',
          serviceId: 'sample-services-cnlasdal',
          serviceName: 'r3-load sample-services',
          path: '/sing/song',
          loads: '数据为空',
          successRate: '数据为空',
          latency: '数据为空',
          apdex: '数据为空'
        },
        {
          serviceGroup: 'mesh-svr',
          serviceId: 'sample-services-cnlasdal',
          serviceName: 'r3-load sample-services',
          path: '/sing/song',
          loads: '数据为空',
          successRate: '数据为空',
          latency: '数据为空',
          apdex: '数据为空'
        },
        {
          serviceGroup: 'mesh-svr',
          serviceId: 'sample-services-cnlasdal',
          serviceName: 'r3-load sample-services',
          path: '/sing/song',
          loads: '66.516',
          successRate: '100',
          latency: '7.323',
          apdex: '1'
        },
        {
          serviceGroup: 'mesh-svr',
          serviceId: 'sample-services-cnlasdal',
          serviceName: 'r3-load sample-services',
          path: '/sing/song',
          loads: '11.419',
          successRate: '100',
          latency: '3.161',
          apdex: '1'
        },
        {
          serviceGroup: 'mesh-svr',
          serviceId: 'sample-services-cnlasdal',
          serviceName: 'r3-load sample-services',
          path: '/sing/song',
          loads: '24.032',
          successRate: '100',
          latency: '1',
          apdex: '1'
        },
        {
          serviceGroup: 'mesh-svr',
          serviceId: 'sample-services-cnlasdal',
          serviceName: 'r3-load sample-services',
          path: '/sing/song',
          loads: '5.613',
          successRate: '100',
          latency: '19.742',
          apdex: '1'
        },
        {
          serviceGroup: 'mesh-svr',
          serviceId: 'sample-services-cnlasdal',
          serviceName: 'r3-load sample-services',
          path: '/sing/song',
          loads: '11.355',
          successRate: '100',
          latency: '21.935',
          apdex: '1'
        },
        {
          serviceGroup: 'mesh-svr',
          serviceId: 'sample-services-cnlasdal',
          serviceName: 'r3-load sample-services',
          path: '/sing/song',
          loads: '11.484',
          successRate: '100',
          latency: '16.129',
          apdex: '1'
        }
      ]
    };
  }
};
</script>

<style>
/* 添加一些样式以匹配图片中的设计 */
.el-input {
  margin-bottom: 10px;
}
</style>
